<template>
  <div class="mine">
    <sm-contice
      v-for="(item, index) in getDiscuss"
      :key="index"
      :content="item"
      :type="'mine'"
      @getMine="getMineMeAPI"
    ></sm-contice>
    <div class="no-mine" v-show="getDiscuss.length === 0">
      <i class="iconfont icon-zanwuxiaoxi"></i>
      <p>暂无消息</p>
    </div>
    <div class="pagination">
      <el-pagination
        small
        layout="prev, pager, next"
        :default-page-size="5"
        :total="total"
        :page-count="page"
        :hide-on-single-page="true"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script>
import { getMineMeAPI, getNoticeNumAPI } from "@/api/ojAPI/ojAPI";
import smContice from "./noitceContent/smContice.vue";
export default {
  data() {
    return {
      getDiscuss: [],
      pageNum: 1,
      total: 1,
      page: 1,
      changeTime: null,
    };
  },
  components: {
    smContice,
  },
  watch: {
    pageNum() {
      if (this.changeTime) {
        clearTimeout(this.changeTime);
      }
      this.changeTime = setTimeout(() => {
        this.getMineMeAPI();
      }, 300);
    },
  },
  mounted() {
    this.getMineMeAPI();
    setTimeout(() => {
      this.getNoticeNum();
    }, 500);
  },

  methods: {
    changePage(val) {
      this.pageNum = val;
    },
    async getMineMeAPI() {
      await getMineMeAPI(this.pageNum).then((res) => {
        if (res.data.code === 200 && res.data.data !== 0) {
          this.$store.oj.discuss.setNoticeTotal(res.data.data.total);
          this.getDiscuss = res.data.data.records;
          this.total = parseInt(res.data.data.total);
          this.page = parseInt(res.data.data.pages);
        } else {
          this.$store.oj.discuss.setNoticeTotal(0);
        }
      });
    },
    async getNoticeNum() {
      await getNoticeNumAPI().then((res) => {
        if (res.data.code === 200) {
          this.$store.oj.discuss.setNoReadNoticeNum(res.data.data);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mine {
  height: calc(100% - 35px);
  width: 100%;
  .no-mine {
    text-align: center;
    height: 100%;
    i {
      color: rgba(24, 160, 88, 0.16);
      font-size: 12em;
    }
    p {
      font-size: 1.3em;
      color: rgba(132, 133, 133, 0.36);
    }
  }
  .el-pagination {
    justify-content: center;
  }
}
</style>
